<template>
  <div id="app">
    <div>充电站数量：{{ chargingStations.length }}</div>
    <div>汽车数量：{{ cars.length }}</div>
    <div id="map"></div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      chargingStations: [], // 充电站数据
      cars: [], // 汽车数据
      map: null, // 地图实例
    };
  },
  mounted() {
    // 初始化地图
    this.initMap();
    // 加载充电站数据
    this.loadChargingStations();
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = new BMap.Map("map");
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    },
    loadChargingStations() {
      // 模拟加载充电站数据
      // 实际情况下，可以从后端接口获取数据
      this.chargingStations = [
        { name: "充电站1", lng: 116.404, lat: 39.915,content:"充电站口1每次充电需要花费100元的充电费" },
        { name: "充电站2", lng: 116.3, lat: 39.95 ,content:"充电站口2每次充电需要花费一百元的充电费"},
        { name: "充电站3", lng: 116.5, lat: 39.9 ,content:"充电站口3每次充电需要花费120元的充电费"},
        { name: "充电站4", lng: 116.2, lat: 39.1 ,content:"充电站口4每次充电需要花费150元的充电费"},
      ];
      // 在地图上添加充电站标记
      this.addMarkers();
    },
    addMarkers() {
      // 在地图上添加充电站标记
      for (const station of this.chargingStations) {
        const point = new BMap.Point(station.lng, station.lat);
        const marker = new BMap.Marker(point);
        this.map.addOverlay(marker);
        // 点击标注展示信息框
        marker.addEventListener("click", function () {
          var infoWindow = new BMap.InfoWindow(station.content);
          this.map.openInfoWindow(infoWindow, point);
        });
        // 第二中形式
        // var content =
        //   '<div style="width: 260px; height: 100px; padding: 10px; font-size: 14px;">' +
        //   "<p>这是一个标注点的信息框</p>" +
        //   "<p>可以在这里展示标注点的详细信息</p>" +
        //   "</div>";
        // var infoWindow = new BMap.InfoWindow(content, { enableAutoPan: true });
      }
    },
  },
};
</script>
  <style>
#map {
  width: 100%;
  height: 800px;
}
</style>